 {% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>物流监控</title>

    <!-- Bootstrap -->
    <link href="{% static '' %}default/css/bootstrap.min.css" rel="stylesheet">
      <link href="{% static '' %}default/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
      <link href="{% static '' %}default/css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body onload="getOvertimeCountry();getExceptionRate();">
{% include 'default/block_nav.html' %}


<div class="container theme-showcase" role="main">


    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
        <span style="font-size: 30px;font-weight: bold;">物流渠道评估 </span>
                <div style="float: right;"><span>导入物流数据：</span>
          <form action="{% url 'logistics_import' %}" target="_blank" enctype="multipart/form-data" method="post" onsubmit="return chk();">
                    <input type="file" name="wuliu" id="wuliu" class="form-group form-inline" style="display: inline;" />
                    {% csrf_token %}
                    <button type="submit" class="btn btn-sm btn-success form-group form-inline">导入</button>
                    <button type="button" class="btn btn-sm btn-danger form-group form-inline">采集</button>
                </form></div>

                </div>
            <div class="container">
                    <div class="input-append date col-md-3" id="startDate" data-date="{{ mindate.send_time|date:'Y-m-d' }}" data-date-format="yyyy-mm-dd">
    开始时间: <input class="" size="16" type="text" name="startDate" value="{{ mindate.send_time|date:'Y-m-d' }}">
    <span class="add-on"><i class="icon-th"></i></span>
</div>
                    <div class="input-append date col-md-3" id="endDate" data-date="{{ maxdate.send_time|date:'Y-m-d' }}" data-date-format="yyyy-mm-dd">
    结束时间: <input class="" name="endDate" size="16" type="text" value="{{ maxdate.send_time|date:'Y-m-d' }}">
    <span class="add-on"><i class="icon-th"></i></span>
</div>

                    <button type="button" class="btn btn-primary btn-sm" id="timeBtn">提 交</button>   <a href="{% url 'logistics_list' %}" style="float: right; margin-right: 30px;">最近90天物流统计</a>

</div>

        <table class="table">
            <thead>
              <tr>
                <th>渠道</th>
                <th><span class="initDay">{% if day_90 %}90天内{% endif %}</span>成功<br/>投递数</th>
                <th><span class="initDay">{% if day_90 %}90天内{% endif %}</span>成功<br/>签收率</th>
                <th><span class="initDay">{% if day_90 %}90天内{% endif %}</span>签收<br/>平均时间</th>
                <th style="width: 400px;">运输超过30天的国家</th>
                <th>－</th>
              </tr>
            </thead>
            <tbody class="tbPinggu">
            {% for c in channelData %}
              <tr>
                <td>{{ c.Channel }}</td>
                <td>{{ c.Amount }}</td>
                <td>{{ c.DSR }}</td>
                <td>{{ c.Days }}</td>
                <td class="overtimeCountry" channel-data="{{ c.Channel }}"></td>
                <td><a href="#" class="btn btn-primary btn-xs" onclick="getInfoByChannel('{{ c.Channel }}')" data-toggle="modal" data-target="#channelModal">查看详情</a></td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
        </div>
    </div>
      <div class="row">
        <div class="col-md-9">



            <div class="page-header">
        <h3>物流延时警告 </h3>
                <div>超过 ：
                     <select name="yujing" id="yujing">
                 <option value="10" {% ifequal yj '10' %}selected{% endifequal %}>10天</option>
                 <option value="15" {% ifequal yj '15' %}selected{% endifequal %}>15天</option>
                 <option value="20" {% ifequal yj '20' %}selected{% endifequal %}>20天</option>
                 <option value="30" {% ifequal yj '30' %}selected{% endifequal %}>30天</option>
             </select>
             </div>
      </div>

        <table class="table">
            <thead>
              <tr>
                <th>物流单号</th>
                <th>物流渠道</th>
                <th>发货时间</th>
                <th>运送时长</th>
                <th>总运输时间</th>
                <th>-</th>
              </tr>
            </thead>
            <tbody class="yjtable">
            {% for l in yujing %}
              <tr id="yj-{{ l.id }}">
                <td><div id="TRNum-{{ l.id }}"></div><a href="javascript:void(0)" onClick="doTrack('{{ l.tracking_number }}','{{ l.id }}')">{{ l.tracking_number }}</a></td>
                <td>{{ l.channel }}</td>
                <td>{{ l.send_time|date:"Y-m-d H:i:s" }}</td>
                <td>{{ l.num1 }} <i class="glyphicon glyphicon-pencil" title="纠错" onclick="edit('{{ l.tracking_number }}','{{ l.status }}','{{ l.num1 }}')" data-toggle="modal" data-target="#editModal"></i></td>
                <td>{{ l.num2 }} </td>
                <td><button type="button" class="btn btn-warning btn-xs" onclick="mark({{ l.id }})">标记已处理</button></td>
              </tr>
            {% endfor %}
            </tbody>
          </table>

             <div class="page-header" name="nav_yichang">
        <h3>物流运输异常 </h3>
                 <div>超过 ：
                     <select name="yichang" id="yichang">
                 <option value="10" {% ifequal yc '10' %}selected{% endifequal %}>10天</option>
                 <option value="20" {% ifequal yc '20' %}selected{% endifequal %}>20天</option>
                 <option value="30" {% ifequal yc '30' %}selected{% endifequal %}>30天</option>
                 <option value="40" {% ifequal yc '40' %}selected{% endifequal %}>40天</option>
             </select>
             </div>
      </div>

        <table class="table">
            <thead>
              <tr>
                <th>物流单号</th>
                <th>物流渠道</th>
                <th>发货时间</th>
                <th>运送时长</th>
                <th>国家</th>
                <th>60天该国家异常率</th>
                <th>-</th>
              </tr>
            </thead>
            <tbody class="yctable">
            {% for l in yichang %}
              <tr id="yc-{{ l.id }}">
                <td><div id="TRNum-{{ l.id }}"></div><a href="javascript:void(0)" onClick="doTrack('{{ l.tracking_number }}','{{ l.id }}')">{{ l.tracking_number }}</a></td>
                <td>{{ l.channel }}</td>
                <td>{{ l.send_time|date:"Y-m-d H:i:s" }}</td>
                <td>{{ l.num1 }} <i class="glyphicon glyphicon-pencil" title="纠错" onclick="edit('{{ l.tracking_number }}','{{ l.status }}','{{ l.num1 }}')" data-toggle="modal" data-target="#editModal"></i></td>
                <td>{{ l.destination }}</td>
                <td class="exceptionRate" dest-data="{{ l.destination }}"></td>
                <td><button type="button" class="btn btn-danger btn-xs" onclick="mark({{ l.id }})">标记已处理</button></td>
              </tr>
            {% endfor %}
            </tbody>
          </table>


            <div class="page-header">
        <h3>国家运输效率统计 </h3>
      </div>

        <table class="table">
            <thead>
              <tr>
                <th>国家</th>
                <th>最优物流渠道</th>
                <th>平均运输总时长</th>
                <th>90天内成功签收率</th>
                <th>统计数量</th>
                <th>#</th>
              </tr>
            </thead>
            <tbody>
               {% for data in countryData %}
            <tr>
                <td>{{ data.Country }}</td>
                <td>{{ data.Channel }}</td>
                <td>{{ data.Days }}</td>
                <td>{{ data.DSR }}%</td>
                <td>{{ data.Amount }}</td>
                <td><button type="button" class="btn btn-primary btn-sm" onclick="getInfoByCountry('{{ data.Country }}')" data-toggle="modal" data-target="#countryModal">
查看详情</button></td>
              </tr>
        {% endfor %}
            </tbody>
          </table>

        </div>
          <div class="col-md-3">
              <table class="table table-striped">
            <thead>
              <tr>
                <th>#</th>
                <th>状态码</th>
                <th>说明</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td> </td>
                <td>0</td>
                <td>未查询</td>
              </tr>
              <tr>
                <td></td>
                <td>1</td>
                <td>妥投</td>
              </tr>
              <tr>
                <td></td>
                <td>2</td>
                <td>已签收</td>
              </tr>
              <tr>
                <td></td>
                <td>3</td>
                <td>异常</td>
              </tr>
              <tr>
                <td></td>
                <td>4</td>
                <td>运输中</td>
              </tr>
              <tr>
                <td></td>
                <td>5</td>
                <td>查询不到</td>
              </tr>
              <tr>
                <td></td>
                <td>6</td>
                <td>跟踪结束</td>
              </tr>
              <tr>
                <td></td>
                <td>7</td>
                <td>运输过久</td>
              </tr>
              <tr>
                <td></td>
                <td>8</td>
                <td>投寄失败</td>
              </tr>
              <tr>
                <td></td>
                <td>9</td>
                <td>到达待取</td>
              </tr>
            </tbody>
          </table>
          </div>

    </div>
</div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="{% static '' %}default/js/bootstrap.min.js"></script>
<script type="text/javascript" src="{% static '' %}default/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="{% static '' %}default/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">

	$('#startDate').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		minView: 2,
		forceParse: 0,
        pickerPosition:"bottom-right",
        startDate:'{{ mindate.send_time|date:'Y-m-d' }}',
        endDate:'{{ maxdate.send_time|date:'Y-m-d' }}'
    });
    $('#endDate').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		minView: 2,
		forceParse: 0,
        pickerPosition:"bottom-right",
        startDate:'{{ mindate.send_time|date:'Y-m-d' }}',
        endDate:'{{ maxdate.send_time|date:'Y-m-d' }}'
    });

    function chk(){
        var obj = document.getElementById('wuliu');
        if(obj.value==''){
                alert("请选择文件上传。");
                return false;
            }
    }

    function mark(id){
        if (confirm("你确定已经处理完毕？")) {
            location.href = "{% url 'logistics_mark' %}?id="+id;
          }else{
              return false;
          }
      }
    function edit(track_number,status,num){
        $('#myEditModal span').html(track_number);
        $('#statusData').val(status);
        $('#dayData').val(num);
        //alert(track_number);

      }
    $('#yichang').change(function(){
        var yc = $(this).children('option:selected').val();
        //window.location.href="?yc="+yc+"#yichang";//页面跳转并传参
        $.get('/api/getyichang/',{'yc':yc},function(data){
            var wlist ='';
            $.each($.parseJSON(data),function(k,w){
                //console.log(w);
                wlist +='<trid="yc-'+w.pk+'"><td><div id="TRNum-'+w.pk+'"></div><a href="javascript:void(0)" onClick="doTrack(\''+w.fields.tracking_number+'\',\''+w.pk+'\')">'+w.fields.tracking_number+'</a></td>';
                wlist +='<td>'+w.fields.channel+'</td>';
                var timeStr = w.fields.send_time;
                timeStr = timeStr.replace('T',' ');
                wlist +='<td>'+timeStr+'</td>';
                wlist +='<td>'+w.fields.num1+'<i class="glyphicon glyphicon-pencil" title="纠错" onclick="edit(\''+w.fields.tracking_number +'\',\''+w.fields.status+'\',\''+w.fields.num1+'\')" data-toggle="modal" data-target="#editModal"></i></td><td>'+w.fields.destination+'</td>';
                wlist +='<td class="exceptionRate" dest-data="'+w.fields.destination+'"></td>';
                wlist +='<td><button type="button" class="btn btn-danger btn-xs" onclick="mark('+w.pk+')">标记已处理</button></td></tr>';
            });
            if(wlist!=''){
                $('.yctable').html(wlist);
                getExceptionRate();
            }else{
                $('.yctable').html('');
            }
        });
    });

    $('#yujing').change(function(){
        var yj = $(this).children('option:selected').val();
        //window.location.href="?yc="+yc+"#yichang";//页面跳转并传参
        $.get('/api/getyujing/',{'yj':yj},function(data){
            var wlist ='';
            $.each($.parseJSON(data),function(k,w){
                //console.log(w);
                wlist +='<tr id="yj-'+w.pk+'"><td><div id="TRNum-'+w.pk+'"></div><a href="javascript:void(0)" onClick="doTrack(\''+w.fields.tracking_number+'\',\''+w.pk+'\')">'+w.fields.tracking_number+'</a></td>';
                wlist +='<td>'+w.fields.channel+'</td>';
                var timeStr = w.fields.send_time;
                timeStr = timeStr.replace('T',' ');
                wlist +='<td>'+timeStr+'</td>';
                wlist +='<td>'+w.fields.num1+'<i class="glyphicon glyphicon-pencil" title="纠错" onclick="edit(\''+w.fields.tracking_number +'\',\''+w.fields.status+'\',\''+w.fields.num1+'\')" data-toggle="modal" data-target="#editModal"></i></td>';
                wlist +='<td>'+w.fields.num2+'</td>';
                wlist +='<td><button type="button" class="btn btn-warning btn-xs" onclick="mark('+w.pk+')">标记已处理</button></td></tr>';
            });
            if(wlist!=''){
                $('.yjtable').html(wlist);
            }else{
                $('.yjtable').html('');
            }
        });
    });


    $('#timeBtn').click(function(){
        var startDate = $("input[name='startDate']").val();
        var endDate = $("input[name='endDate']").val();

        //alert(startDate+' - '+endDate);

        $.get('/api/getpinggu/',{'sd':startDate,'ed':endDate},function(data){
            //console.log(data);
            $('.initDay').hide();
            var wlist ='';
            for(var i=0;i<data.length;i++){
                wlist +='<tr><td>'+data[i].Channel+'</td>';
                wlist += '<td>'+data[i].Amount+'</td>';
                wlist += '<td>'+data[i].DSR+'%</td>';
                wlist += '<td>'+data[i].Days+'</td>';
                wlist += '<td class="overtimeCountry" channel-data="'+data[i].Channel+'"></td>';
                wlist += '<td><a href="#" data-toggle="modal" class="btn btn-primary btn-xs" onclick="getInfoByChannel(\''+ data[i].Channel +'\')" data-target="#channelModal">查看详情</a></td>';
                wlist +='</tr>';
            }
            if(wlist!=''){
                $('.tbPinggu').html(wlist);
                getOvertimeCountry();
            }else{
                $('.tbPinggu').html('');
            }
        });

    });



</script>
  {% include 'default/tongji.html' %}


  <!-- Modal -->
<div class="modal fade" id="countryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" class="myModalLabel"><span class="countryName">俄罗斯</span>（60天内数据）</h4>
      </div>
      <div class="modal-body">
        <table class="table table-striped">
            <thead>
              <tr>
                <th>物流渠道</th>
                <th>总运输时间</th>
                <th>成功签收率</th>
                <th>统计数</th>
              </tr>
            </thead>
            <tbody class="winList">

            </tbody>
          </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>



<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myEditModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myEditModal"><span></span>物流信息纠错</h4>
      </div>
      <div class="modal-body">
          物流状态：
          <select name="statusData" id="statusData">
              <option value="1">妥投</option>
              <option value="2">已签收</option>
              <option value="3">异常</option>
              <option value="4">运输中</option>
              <option value="5">查询不到</option>
              <option value="6">跟踪结束</option>
              <option value="7">运输过久</option>
              <option value="8">投寄失败</option>
          </select>
          运送时长：<input type="text" name="dayData" id="dayData" style="width:60px;"> 天
          <button class="btn btn-sm btn-primary" style="margin-left: 60px;" id="saveBtn">保 存</button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>


  <!-- Modal -->
<div class="modal fade" id="channelModal" tabindex="-1" role="dialog" aria-labelledby="channelModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" class="channelModalLabel"><span class="channelName"></span>	（60天内数据）</h4>
      </div>
      <div class="modal-body">
        <table class="table table-striped">
            <thead>
              <tr>
                <th>国家</th>
                <th>总运输时间</th>
                <th>成功签收率</th>
                <th>统计数量</th>
              </tr>
            </thead>
            <tbody class="cnList">

            </tbody>
          </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript" src="//cdn.trackingmore.com/plugins/v1/plugins.min.js"></script>
<script type="text/javascript">
    function doTrack(num,id) {
    TRACKINGMORE.trackMynumber({
            TR_ElementId:"TRNum-"+id,      //必须，指定悬浮位置的元素ID。
            TR_Width:800,        //可选，指定查询结果宽度，默认撑满容器。
            TR_Height:480,       //可选，指定查询结果高度，最大高度为800px，默认撑满容器。
            TR_ExpressCode:"0",       //可选，指定运输商，默认为自动识别。
            TR_Lang:"cn",        //可选，指定UI语言，默认根据浏览器自动识别。
            TR_Num:num       //必须，指定要查询的单号。
    });
}
        //获取国家详细数据
    function getInfoByCountry(country){
            if(country!=''){
                $('#countryModal .countryName').text(country);
                $.get('/api/getinfo/',{'country':country},function(data){
                    //console.log(data);
                    var wlist ='';
                    $.each(data,function(k,w){
                        //console.log(w);
                        wlist +='<tr class=\"item\"><td>'+w.Channel+'</td><td>'+w.Days+'</td><td>'+w.DSR+'</td><td>'+w.Amount+'</td></tr>';
                    });
                    if(wlist!=''){
                        $('#countryModal .winList').html(wlist);
                    }else{
                        $('#countryModal .winList').html('');
                    }
                });
            }
        }
    function getInfoByChannel(channel){
            if(channel!=''){
                $('#channelModal .channelName').text(channel);
                $.get('/api/getinfo/',{'channel':channel},function(data){
                    //console.log(data);
                    var wlist ='';
                    $.each(data,function(k,w){
                        //console.log(w);
                        wlist +='<tr class=\"item\"><td>'+w.Country+'</td><td>'+w.Days+'</td><td>'+w.DSR+'%</td><td>'+w.Amount+'</td></tr>';
                    });
                    if(wlist!=''){
                        $('#channelModal .cnList').html(wlist);
                    }else{
                        $('#channelModal .cnList').html('');
                    }
                });
            }
        }
    function getOvertimeCountry(){
        var obj = $('.overtimeCountry');
        var len = obj.length;
        for(var i=0; i<len; i++){
            //console.log(obj3[i].parentNode.parentNode.style.cssText="text-indent:0px;text-align: center;");
            //alert(obj[i].innerHTML);
            var channel = obj[i].getAttribute('channel-data');
            //alert(channel);

            var wlist = new Array();
            //{url:"/jquery/test1.txt",async:false}
            //$.ajax('/api/getovertime/',{'channel':channel},function(data){
            $.ajax({url:'/api/getovertime/',async:false,data:{'channel':channel},success:function(data){
                //console.log(data);

                $.each(data,function(k,w){
                        //console.log(w);
                        wlist.push(w.Country);
                    });
                obj[i].innerHTML=wlist;
                //console.log(wlist);
            }

        });
    }}

    function getExceptionRate(){
        var obj = $('.exceptionRate');
        var len = obj.length;
        for(var i=0; i<len; i++){
            //console.log(obj3[i].parentNode.parentNode.style.cssText="text-indent:0px;text-align: center;");
            //alert(obj[i].innerHTML);
            var country = obj[i].getAttribute('dest-data');
            //alert(channel);

            $.ajax({url:'/api/getexceptionrate/',async:false,data:{'country':country},success:function(data){
                //console.log(data);
                obj[i].innerHTML=data[0].DSR+"%";
                //console.log(wlist);
            }

        });
    }}


    $('#saveBtn').click(function(){
        var status = $('#statusData').val();
        var days = $('#dayData').val();
        var track_number = $('#myEditModal span').html();
        //alert(track_number);

        if(parseInt(days)>0){
            location.href = "{% url 'logistics_mark' %}?t="+track_number+"&d="+days+"&s="+status;
            //alert('OK');
        }else{
            alert('天数要大于0');
        }


    });
</script>

  </body>
</html>